import React, { useRef, useEffect, useState } from "react";
import { useDispatch, useSelector ,useLocation } from 'umi'
import styles from "./compileDetail.less"
import { Select, Form, Input, Button, message } from 'antd';
import { IQuestionType, IExamType, ISubject } from '@/utils/interface'
import Editor from 'for-editor'
import { IUpdataExam } from "@/utils/interface";

const compileDetail: React.FC = () => {
    const { Option } = Select
    const [form] = Form.useForm();
    const inputLayout = {
        wrapperCol: {span: 12 }
    };
    const editorLayout = {
        wrapperCol: {span: 6 }
    }
    const location=useLocation()
    const dispatch = useDispatch()
    useEffect(() => {
        dispatch({
            type: 'question/getQuestionType'
        })
        dispatch({
            type: 'question/getExamSubject'
        })
        dispatch({
            type: 'question/getExamType'
        })
        let arr=location.state
    }, [])
    const { questionTypes } = useSelector(module => (module as { question: { questionTypes: IQuestionType[] } }).question)
    const { subjects } = useSelector(module => (module as { question: { subjects: ISubject[] } }).question)
    const { examTypes } = useSelector(module => (module as { question: { examTypes: IExamType[] } }).question)
    const { user_id } = useSelector(module=>(module as {user:{userInfo:{user_id:string}}}).user.userInfo)
    function onFinish(values: IUpdataExam) {
        // let result = 
        dispatch({
            type: 'question/setUpdataExam',
            // payload: {...values , user_id}
             payload: {...values}
          });
        //   (result as unknown as Promise<{code: number, msg: string}>).then(res=>{
        //     if (res.code === 1){
        //       message.success(res.msg);
        //     }else{
        //       message.error(res.msg);
        //     }
        // })
    }
    return <Form className={styles.wrap} onFinish={onFinish} form={form} initialValues={{
        title: (location.state as IUpdataExam).title,
        questions_stem: (location.state as IUpdataExam).questions_stem,
        questions_answer: (location.state as IUpdataExam).questions_answer,
        exam_id:(location.state as IUpdataExam).exam_id,
        subject_id:(location.state as IUpdataExam).subject_id,
        questions_type_id:(location.state as IUpdataExam).questions_type_id,
      }}>
        <h1>编辑试题</h1>
        <div className={styles.cotent}>
        <p>题目信息</p>
        <label htmlFor="">题干</label>
        <Form.Item
          {...inputLayout}
          name="title"
          rules={[{ required: true, message: '请输入试题题干!' }]}
        >
          <Input />
        </Form.Item>
        <label htmlFor="">题目主题</label>
        <Form.Item
          name="questions_stem"
          rules={[{ required: true, message: '请输入试题主题!' }]}
        >
          <Editor />
        </Form.Item>
        <label htmlFor="">请选择考试类型：</label>
        <Form.Item
          name="exam_id"
          {...editorLayout}
        >
          <Select>{
              (examTypes as IExamType[]).map(item=>{
                return <Option key={item.exam_id} value={item.exam_id}>{item.exam_name}</Option>
              })
          }</Select>
        </Form.Item>

        <label htmlFor="">请选择课程类型：</label>
        <Form.Item
          name="subject_id"
          {...editorLayout}
        >
          <Select>{
              (subjects as ISubject[]).map(item=>{
                return <Option key={item.subject_id} value={item.subject_id}>{item.subject_text}</Option>
              })
          }</Select>
        </Form.Item>
        <label htmlFor="">请选择题目类型：</label>
        <Form.Item
          name="questions_type_id"
          {...editorLayout}
        >
          <Select>{
              (questionTypes as IQuestionType[]).map(item=>{
                return <Option key={item.questions_type_id} value={item.questions_type_id}>{item.questions_type_text}</Option>
              })
          }</Select>
        </Form.Item>

        <label htmlFor="">答案信息</label>
        <Form.Item
          name="questions_answer"
          rules={[{ required: true, message: '请输入试题答案!' }]}
        >
          <Editor/>
        </Form.Item>

        <Button type="primary" htmlType="submit" className={styles.btn}>
          编辑
        </Button>
        </div>
      </Form>
      
}

export default compileDetail